<template>
  <iot-blk class="realtime-blk" :moreType="0" size="big">
    <div class="fl-ad">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="centerBox"
        @click="showPoint(index)"
      >
        <img
          class="img"
          :src="
            require(`../../../assets/images/commandImg/icon_title_0${index +
              1}.png`)
          "
        />
        <div class="mt-10" :class="{ color: activeIndex == index }">
          {{ item.name }}
        </div>
      </div>
    </div>
  </iot-blk>
</template>

<script>
export default {
  props: {
    areaData: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  watch: {
    areaData() {
      this.$emit("addPoint", []);
    },
  },
  data() {
    return {
      dataList: [
        {
          name: "应急避难场所",
        },
        {
          name: "应急物资",
        },
        {
          name: "应急专家",
        },
        {
          name: "应急队伍",
        },
        {
          name: "微型消防站",
        },
      ],
      activeIndex: -1,
      mapData: [],
    };
  },
  methods: {
    showPoint(index) {
      this.activeIndex = index;
      let type = index + 1;
      this.$get("/emergencyCommand/emergencyCommandList", {
        type: type.toString(),
        area: this.areaData.id,
        // areaId: this.areaData.id,
      }).then(
        (res) => {
          let mapData = res.data.map((item) => {
            return {
              name: item.name,
              lat: item.lat,
              lon: item.lon,
            };
          });
          this.$emit("addPoint", mapData);
        },
        (err) => {}
      );
    },
  },
};
</script>

<style lang="less" scoped>
.img {
  width: 0.3125rem;
  height: 0.3125rem;
}
.color {
  color: aqua;
}
</style>
